<template>
  <div class="msgListCard">
    <div class="flexSpace">
      <div
        style="font-size: 14px; color: #666666"
        @click="dialogVisible = true"
      >
        <div class="flexLeft">
          <div class="msgListCard_around" style="background: #508fcc">
            <img src="../incon/IconOfficialMsg.svg" />
          </div>
          <div style="padding-left: 16px">{{ distIndex }}</div>
          <div style="font-size: 12px; padding: 0 30px 0 50px">
            {{ mation.noticeDate }}
          </div>
          <div
            :class="
              mation.readFlag == 0
                ? 'msgListCard_stateNoread'
                : 'msgListCard_state'
            "
          >
            {{ mation.readFlag == 0 ? "未读" : "已读" }}
          </div>
        </div>
        <div style="padding-left: 56px">
          <div style="padding: 0 0 16px 0; font-size: 16px; font-weight: 600">
            {{ mation.title }}
          </div>
          <div>
            {{ mation.content }}
          </div>
        </div>
      </div>
      <div style="padding-right: 86px">
        <el-checkbox
          v-model="chooseState"
          @change="chooseStateChange"
        ></el-checkbox>
      </div>
    </div>

    <el-divider></el-divider>
    <el-dialog
      class="msgDialog"
      :append-to-body="true"
      title="消息详情"
      :visible.sync="dialogVisible"
      width="800px"
    >
      <div>
        <div class="flexLeft">
          <div class="msgListCard_around" style="background: #508fcc">
            <img src="../incon/IconOfficialMsg.svg" />
          </div>
          <div style="padding-left: 16px">{{ distIndex }}</div>
          <div style="font-size: 12px; padding: 0 30px 0 50px">
            {{ mation.noticeDate }}
          </div>
        </div>
        <div style="padding-left: 56px">
          <div
            style="padding: 40px 0 16px 0; font-size: 16px; font-weight: 600"
          >
            {{ mation.title }}
          </div>
          <div>
            {{ mation.content }}
          </div>
        </div>
        <el-divider></el-divider>
        <div class="flexRight">
          <span slot="footer" class="dialog-footer">
            <el-button
              type="primary"
              round
              @click="dialogVisible = false"
            >关闭</el-button>
          </span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import msgList from '@/views/msg/msg';
export default {
  components: {
    // msgList
  },
  props: ['mation'],
  data() {
    return {
      dialogVisible: false,
      chooseState: false

    };
  },
  computed: {
    distIndex() {
      let disStr = '';
      this.$parent.dist.forEach((element) => {
        if (this.mation.noticeType === element.code) {
          disStr = element.name;
        }
      });
      return disStr;
    }
  },
  mounted() {},
  methods: {
    // 选择框状态变化
    chooseStateChange(e) {
      this.$emit('checkState', this.mation.id);
    }
  }
};
</script>

<style scoped lang='scss'>
.msgListCard {
  // 状态样式已读
  .msgListCard_state {
    color: #508fcc;
    border: 1px solid #a0bae1;
    padding: 3px 16px;
    font-size: 14px;
    border-radius: 14px;
  }
  // 状态样式未读
  .msgListCard_stateNoread {
    color: #508fcc;
    padding: 3px 16px;
    font-size: 14px;
    border-radius: 14px;
    background: #d8e4f6;
  }
}
</style>
